<template>
  <el-dialog v-model="visible" title="制造模具" width="30%" draggable>
    <el-divider content-position="left"><span class="divider_item">基本信息</span></el-divider>
    <!-- <div>
    <label for="myButton" class="inline-label">Label文本：</label>
    <button id="myButton" class="inline-button">按钮</button>
  </div> -->

    <div>
      <el-row class="row_item">
        <el-form-item style="width: 60%;">
        <span class="form-item">模具名称</span>
        
          <el-input v-model="symbolName" autofocus size="mini" :ref="FileNameInput" id="symbolNameID" style="width:60%"
            class="symbolInput">
          </el-input>
        
        </el-form-item>
      </el-row>
      <el-row class="row_item">
        <el-form-item style="width: 60%;">
        <span class="form-item">自动生成标签</span>
        <el-radio-group v-model="autoGenerateLabelRadio" class="ml-4">
          <el-radio label=1 size="large">是</el-radio>
          <el-radio label=0 size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      </el-row>
      <el-row class="row_item">
        <el-form-item style="width: 60%;">
          <span class="form-item">标签默认位置</span>
          <el-select id="labelPosID" class="custom-select-height" v-model="DefaultLabPosMode" @change="onSelLabPosMode($event)" style="width:60%;">
              <el-option v-for="item in LabelPosModeItemArr" :key="item.id" :label="item.propValue"
                  :value="item.propValue" style="width:100%;">
              </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row class="row_item">
        <el-form-item style="width: 100%;flex-wrap: nowrap;">
          <span class="form-item">多态模具</span>
          <el-radio-group v-model="multiStateRadio" class="ml-4">
            <el-radio label=0 size="large">否</el-radio>
            <el-radio label=1 size="large">是</el-radio>
          </el-radio-group>
          <div v-if="multiStateRadio == 1" style="width:320px;">
            <label for="stateNameID">态名</label>
            <el-input v-model="stateName" autofocus size="mini" :ref="stateNameInput" id="stateNameID" style="width:40%">
            </el-input>
            <label for="stateValueID">态值</label>
            <el-input v-model="stateValue" autofocus size="mini" :ref="stateValueInput" id="stateValueID"
              style="width:30%">
            </el-input>
          </div>
        </el-form-item>
      </el-row>
      <el-row class="row_item">
        <el-form-item style="width: 80%;">
          <span class="form-item">所属分类器</span>
          <el-input v-model="category.title" autofocus size="mini" id="categoryID" class="symbolInput"></el-input>
          <el-tooltip class="item" effect="light" content="从分类器树中选择" placement="top-start" :show-after=300>
            <el-button @click="onSelCategory">...</el-button>
          </el-tooltip>
          <div id="ToolContainerSelect">
          <el-drawer title="工具分类器" v-model="drawerVisible" :before-close="handleClose" :size=300 @open="onOpenDrawner">
            <div class="scroll-div">
              <el-tree :data="CategoryList" show-checkbox node-key="id" :default-expanded-keys="['1']"
                :default-checked-keys="checkedKeyArr" :props="defaultProps" @check="onCheckNode" />
            </div>

          </el-drawer>
        </div>
        </el-form-item>
      </el-row>
    </div>

    <el-divider content-position="left"><span class="divider_item">模具功能类型</span></el-divider>
    <el-radio-group v-model="moldActionTypeRadio" class="ml-4">
      <el-radio label=0 size="large">常规</el-radio>
      <el-radio label=1 size="large">容器</el-radio>
      <el-radio label=2 size="large">子项</el-radio>
      <el-radio label=3 size="large">软件包</el-radio>
      <el-radio label=4 size="large">连接线</el-radio>
    </el-radio-group>


    <el-divider v-if="moldActionTypeRadio == 1" content-position="left"><span class="divider_item">容器子项功能类型</span></el-divider>
    <el-radio-group v-if="moldActionTypeRadio == 1" v-model="childActionTypeRadio" class="ml-4">
      <el-radio label=0 size="large">自动对齐</el-radio>
      <el-radio label=1 size="large">自由调整</el-radio>
    </el-radio-group>

    <el-divider v-if="moldActionTypeRadio != 4" content-position="left"><span class="divider_item">模具中文本、线独立性</span></el-divider>
    <el-radio-group v-if="moldActionTypeRadio != 4" v-model="unitFixRadio" class="ml-4">
      <el-radio label=1 size="large">固定</el-radio>
      <el-radio label=0 size="large">独立</el-radio>
    </el-radio-group>

    <el-divider content-position="left"><span class="divider_item">模具业务类型</span></el-divider>
    <el-radio-group v-model="mainTypeRadio" class="ml-4">
      <el-radio label='0x0202' size="large">常规模具</el-radio>
      <el-radio label='0x0203' size="large">UML模具</el-radio>
      <el-radio label='0x0204' size="large">原型模具</el-radio>
      <el-radio label='0x0205' size="large">办公模具</el-radio>
    </el-radio-group>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
// import axios from 'axios';
import { useStore } from 'vuex';
const store = useStore();

import {KeyGenerator} from '../../script/canvas/common/keygenerator';

const visible = ref(false)
const symbolName = ref("未命名")
const category = ref({ id: '1-1', title: '基本形状', className: 'base-unit', isleaf: true })
const unitFixRadio = ref('1')
const mapctrl = ref(null);
const mainTypeRadio = ref('0x0202');
const moldActionTypeRadio = ref('0')
const childActionTypeRadio = ref(0)
const drawerVisible = ref(false)
const checkedKeyArr = ref([])
const autoGenerateLabelRadio = ref('1')
const multiStateRadio = ref('0')
const stateName = ref("不定态")
const stateValue = ref(-1)

const DefaultLabPosMode = ref("下中")

const defaultProps = {
  children: 'children',
  label: 'title',
}

const LabelPosModeItemArr = ref([
    { id: 'labPosMode@center', propValue: '正中' },
    { id: 'labPosMode@botttom_center', propValue: '下中' },
    { id: 'labPosMode@left_center', propValue: '左中' },
    { id: 'labPosMode@right_center', propValue: '右中' },
    { id: 'labPosMode@top_center', propValue: '上中' }
]);

const data = [
  {
    id: '1',
    title: '常规',
    className: 'base',
    isleaf: false,
    children: [
      {
        id: '1-1',
        title: '基本形状',
        className: 'base-unit',
        isleaf: true
      },
      {
        id: '1-2',
        title: '图案形状',
        className: 'base-symbol',
        isleaf: true
      },
      {
        id: '1-3',
        title: '方块',
        className: 'base-block',
        isleaf: true
      }
    ]
  },
  {
    id: '2',
    title: '日常办公',
    className: 'office',
    isleaf: false,
    children: [
      {
        id: '2-1',
        title: '组织结构图',
        className: 'office-org',
        isleaf: true
      },
      {
        id: '2-2',
        title: '图表和图形',
        className: 'office-chart',
        isleaf: false,
        children: [
          {
            id: '2-2-1',
            title: '绘制报表',
            className: 'office-chart-report',
            isleaf: true
          },
          {
            id: '2-2-2',
            title: '营销图表',
            className: 'office-chart-business',
            isleaf: true
          }
        ]
      },
      {
        id: '2-3',
        title: '业务进程',
        className: 'office-pro',
        isleaf: false
      }
    ]
  }
]

const CategoryList = ref(data)

var onSelCategory = function () {
  initAllCategory();
  drawerVisible.value = true;
}

var onSelLabPosMode = function(item){
  console.log("onSelLabPosMode:"+item);
}

//checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys
var onCheckNode = function (checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
  console.log(checkedKeys);
  let selNodeArr = checkedKeys.checkedNodes;

  checkedKeyArr.value = [];
  for (let i = 0; i < selNodeArr.length; i++) {
    let t = selNodeArr[i];
    checkedKeyArr.value.push(t.id);
    category.value = t;
  }
}

const onConfirm = () => {
  console.log("symbolDefDlg show--------------:" + symbolName.value + "  " + category.value);
  visible.value = false;
  if (moldActionTypeRadio.value == 4) {
    mainTypeRadio.value = 0x0201;
  }
  let state = 0;
  if (multiStateRadio.value == 1) {
    state = parseInt(stateValue.value);
  }

  let extInfo = {};
  extInfo.autoLabel = parseInt(autoGenerateLabelRadio.value);
  extInfo.dlftLabPos = (DefaultLabPosMode.value);
  saveSymbol(mainTypeRadio.value, parseInt(moldActionTypeRadio.value), symbolName.value,
    category.value.className, parseInt(unitFixRadio.value), extInfo,state);
  ElMessage('创建图符成功')
}

var saveSymbol = function (maintype, moldActionType, name, category, unitFixedFlag, extInfo, state) {
  console.log("save symbol");
  let result = window.mainctl.m_pSymbolINTF.setSelGraphsAsSymbol(maintype, name, state, false);
  if (result) {
    console.log(result.data);
    post2Save(result, category, unitFixedFlag, moldActionType, extInfo);
  }
}

var post2Save = function (symbolInfo, category, unitFixedFlag, moldActionType, extInfo) {
  var url = "api/symbol/save";
  var postObj = {};
  postObj["uuid"] = KeyGenerator.rid();
  postObj["data"] = symbolInfo.data;
  postObj["name"] = symbolInfo.name;
  postObj["typeID"] = symbolInfo.typeID;
  postObj["userid"] = "longx13";
  postObj["category"] = category;
  postObj["iconURL"] = symbolInfo.iconURL;
  postObj["unitFixedFlag"] = unitFixedFlag;
  postObj["autoLabel"] = extInfo.autoLabel;
  postObj["dlftLabPos"] = extInfo.dlftLabPos;

  let actType = moldActionType;
  if (symbolInfo.typeID >> 16 == 0x0201) {
    actType = 0;
  }
  postObj["moldActionType"] = actType;
  post2SaveSymbol(url, postObj);
}

var post2SaveSymbol = function (url, obj) {
  axios.post(url, obj).then(res => {
    console.log(res.data);
  }).catch(function (error) {
    console.log(error);
  })
}

var parseChild = function (list) {
  let childArr = [];
  for (let i = 0; i < list.length; i++) {
    let t = list[i];
    let className = t.name;
    let title = t.title;
    let id = t.id;
    let isleaf = true;
    let children = [];
    if (t.children != null) {
      isleaf = false;
      children = parseChild(t.children);
    }
    let info = { id, title, className, isleaf, children };
    childArr.push(info);
  }
  return childArr;
}

var initDatas = function (list) {
  CategoryList.value = [];
  let tmpArr = [];
  for (let i = 0; i < list.length; i++) {
    let t = list[i];
    let className = t.name;
    let title = t.title;
    let id = t.id;
    let isleaf = true;
    let children = [];
    if (t.children != null) {
      isleaf = false;
      children = parseChild(t.children);
    }
    let info = { id, title, className, isleaf, children };
    tmpArr.push(info);
  }
  CategoryList.value = tmpArr;
}

const post2GetAllCategory = function (url, obj) {
  axios.post(url, obj).then(res => {
    console.log(res.data);
    initDatas(res.data);
  }).catch(function (error) {
    console.log(error);
  })
}

const initAllCategory = function (vDisType) {
  console.log("initAllCategory********************************");
  var url = "api/toolcategory/getAllAsTree";
  var postObj = { "userid": store.state.uid };
  post2GetAllCategory(url, postObj);
}

defineExpose({
  visible,
  mapctrl
});

</script>

<style scoped>
.inline-label {
  display: inline-block;
  margin-right: 10px;
  /* 可选，用于设置标签和按钮之间的间距 */
}

.inline-button {
  display: inline-block;
}

.symbolLabel {
  display: inline-block;
  margin-right: 10px;
  /* 可选，用于设置标签和输入框之间的间距 */
}

.symbolInput {
  display: inline-block;
  width:180px;
}

.el-dialog__title {
  padding: 0px;
  /* 设置标题的上下内边距 */
  margin-bottom: 10px;
  /* 设置标题与内容之间的外边距 */
}

.el-dialog .el-dialog__header {
  padding: 10px;
  /* 设置标题区域的上下内边距 */
}

/* 通过选择器 .el-dialog__body 来修改内容部分的样式 */
.el-dialog__body {
  padding: 10px;
  /* 设置内容部分的上下内边距 */
}

/* 调整el-drawer的位置 */
.el-dialog__wrapper {
  position: relative;
}

.el-drawer__container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 100%;
  /* 将抽屉放在对话框的右侧 */
  width: 300px;
  /* 根据需要调整抽屉的宽度 */
  transition: left 0.3s;
  /* 添加过渡效果 */
}

/* 当抽屉可见时，将其从左侧弹出 */
.el-drawer-enter {
  left: 100%;
}

.el-drawer-enter-active {
  left: calc(100% - 300px);
  /* 将抽屉滑动到可见位置 */
}

.el-drawer-leave-active {
  left: 100%;
  /* 隐藏抽屉 */
}

.custom-select-height .el-select {
  height: 34px; /* 你想要的高度 */
}

.form-item{
    color:green;
    font-size: 14px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
    width: 90px;
    margin-right: 10px;
  }

  .divider_item{
    color: blue;
    font-size: 18px;
  }

  .row_item{
    flex-direction: row;
    height:40px;
    flex-wrap: nowrap !important;
  }
</style>
  